---
{
	"title": "Multimedia Player - YouTube",
	"language": "en",
	"category": "Plugins",
	"description": "Provides an accessible multimedia player for embedding YouTube video into web pages.",
	"tag": "multimedia, youtube",
	"parentdir": "multimedia",
	"altLangPrefix": "multimedia-youtube",
	"dateModified": "2014-08-01"
}
---
<span class="wb-prettify all-pre hide"></span>

<div class="row">
	<section class="col-md-12">
		<h2>Overview</h2>
		<p>For YouTube videos, the multimedia player integrates the YouTube chromeless player which leverages the native HTML5 <code>video</code> tag.</p>
		<p>The multimedia player's timeline relies on the HTML5 <code>progress</code> element and uses a polyfill when the element is not supported.</p>
	</section>
</div>

<div class="row">
	<section class="col-md-6">
		<h2>Example</h2>
		<figure class="wb-mltmd" data-wb-mltmd='{"shareUrl": "https://www.youtube.com/watch?v=9znKJqnFuuY"}'>
			<video title="Suspect">
				<source type="video/youtube" src="https://www.youtube.com/watch?v=9znKJqnFuuY">
			</video>
			<figcaption>
				<p>Suspect (<a href="https://www.canada.ca/en/health-canada/services/video/suspect.html#trans">Transcript</a>)</p>
			</figcaption>
		</figure>

		<details class="mrgn-tp-md">
			<summary>View code</summary>
			<pre><code>&lt;figure class=&quot;wb-mltmd&quot; data-wb-mltmd='{"shareUrl": "https://www.youtube.com/watch?v=9znKJqnFuuY"}'&gt;
	&lt;video title=&quot;Suspect&quot;&gt;
		&lt;source type=&quot;video/youtube&quot; src=&quot;https://www.youtube.com/watch?v=9znKJqnFuuY&quot; /&gt;
	&lt;/video&gt;
	&lt;figcaption&gt;
		&lt;p&gt;Suspect&lt;/p&gt;
	&lt;/figcaption&gt;
&lt;/figure&gt;</code></pre>
		</details>
	</section>
	<section class="col-md-6">
		<h2>Muted example</h2>
		<figure class="wb-mltmd" data-wb-mltmd='{"shareUrl": "https://www.youtube.com/watch?v=9znKJqnFuuY"}'>
			<video title="Suspect" muted>
				<source type="video/youtube" src="https://www.youtube.com/watch?v=9znKJqnFuuY">
			</video>
			<figcaption>
				<p>Suspect (<a href="https://www.canada.ca/en/health-canada/services/video/suspect.html#trans">Transcript</a>)</p>
			</figcaption>
		</figure>

		<details class="mrgn-tp-md">
			<summary>View code</summary>
			<pre><code>&lt;figure class=&quot;wb-mltmd&quot; data-wb-mltmd='{"shareUrl": "https://www.youtube.com/watch?v=9znKJqnFuuY"}'&gt;
	&lt;video title=&quot;Suspect&quot; muted&gt;
		&lt;source type=&quot;video/youtube&quot; src=&quot;https://www.youtube.com/watch?v=9znKJqnFuuY&quot; /&gt;
	&lt;/video&gt;
	&lt;figcaption&gt;
		&lt;p&gt;Suspect&lt;/p&gt;
	&lt;/figcaption&gt;
&lt;/figure&gt;</code></pre>
		</details>
	</section>
</div>

<div class="row">
	<section class="col-md-6">
		<h2>Example with fullscreen button</h2>
		<figure class="wb-mltmd" data-wb-mltmd='{"fullscreenBtn": true}'>
			<video title="Suspect">
				<source type="video/youtube" src="https://www.youtube.com/watch?v=9znKJqnFuuY">
			</video>
			<figcaption>
				<p>Suspect (<a href="https://www.canada.ca/en/health-canada/services/video/suspect.html#trans">Transcript</a>)</p>
			</figcaption>
		</figure>

		<details class="mrgn-tp-md">
			<summary>View code</summary>
			<pre><code>&lt;figure class=&quot;wb-mltmd&quot; data-wb-mltmd='{"fullscreenBtn": true}'&gt;
	&lt;video title=&quot;Suspect&quot;&gt;
		&lt;source type=&quot;video/youtube&quot; src=&quot;https://www.youtube.com/watch?v=9znKJqnFuuY&quot; /&gt;
	&lt;/video&gt;
	&lt;figcaption&gt;
		&lt;p&gt;Suspect&lt;/p&gt;
	&lt;/figcaption&gt;
&lt;/figure&gt;</code></pre>
		</details>
	</section>
	<section class="col-md-6">
		<h2>YouTube video in a lightbox</h2>
		<p><a class="wb-lbx lbx-modal lbx-iframe" href="#video-youtube">Open the video</a></p>
		<section id="video-youtube" class="mfp-hide modal-dialog modal-content overlay-def">
			<header class="modal-header">
				<h3>YouTube video in a lightbox</h3>
			</header>
			<div class="modal-body">
				<figure class="wb-mltmd" data-wb-mltmd='{"shareUrl": "https://www.youtube.com/watch?v=9znKJqnFuuY"}'>
					<video title="Suspect">
						<source type="video/youtube" src="https://www.youtube.com/watch?v=9znKJqnFuuY">
					</video>
					<figcaption>
						<p>Suspect (<a href="https://www.canada.ca/en/health-canada/services/video/suspect.html#trans">Transcript</a>)</p>
					</figcaption>
				</figure>
			</div>
		</section>

		<details>
			<summary>View code</summary>
			<pre><code>&lt;p&gt;&lt;a class="wb-lbx lbx-modal lbx-iframe" href="#video-youtube"&gt;Open the video&lt;/a&gt;&lt;/p&gt;
		&lt;section id="video-youtube" class="mfp-hide modal-dialog modal-content overlay-def"&gt;
			&lt;header class="modal-header"&gt;
				&lt;h3&gt;YouTube video in a lightbox&lt;/h3&gt;
			&lt;/header&gt;
			&lt;div class="modal-body"&gt;
				&lt;figure class="wb-mltmd" data-wb-mltmd='{"shareUrl": "https://www.youtube.com/watch?v=9znKJqnFuuY"}'&gt;
					&lt;video title="Suspect"&gt;
						&lt;source type="video/youtube" src="https://www.youtube.com/watch?v=9znKJqnFuuY" /&gt;
					&lt;/video&gt;
					&lt;figcaption&gt;
						&lt;p&gt;Suspect (&lt;a href="https://www.canada.ca/en/health-canada/services/video/suspect.html#trans"&gt;Transcript&lt;/a&gt;)&lt;/p&gt;
					&lt;/figcaption&gt;
				&lt;/figure&gt;
			&lt;/div&gt;
		&lt;/section&gt;</code></pre>
		</details>
	</section>
</div>

<div class="row">
	<section class="col-md-6">
		<h2>Video with defined video frame size</h2>
		<figure class="wb-mltmd">
			<video title="Suspect" width="720" height="1280">
				<source type="video/youtube" src="https://www.youtube.com/watch?v=4pe_UoNdj5s">
			</video>
			<figcaption>
				<p>Suspect (<a href="https://www.canada.ca/en/health-canada/services/video/suspect.html#trans">Transcript</a>)</p>
			</figcaption>
		</figure>

		<details class="mrgn-tp-md">
			<summary>View code</summary>
			<pre><code>&lt;figure class="wb-mltmd">
	&lt;video title="Suspect" width="720" height="1280">
		&lt;source type="video/youtube" src="https://www.youtube.com/watch?v=4pe_UoNdj5s">
	&lt;/video>
	&lt;figcaption>
		&lt;p>Suspect (&lt;a href="https://www.canada.ca/en/health-canada/services/video/suspect.html#trans">Transcript&lt;/a>)&lt;/p>
	&lt;/figcaption>
&lt;/figure></code></pre>
		</details>
	</section>
</div>
